<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">  <!-- 定义文档的字符编码为 utf-8 -->
    <title></title>  <!-- 网页的标题 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>  <!-- 引入 jQuery 库 -->
</head>
<body>
    <div id="output"></div>  <!-- 定义一个具有 id 为"output"的 div 元素 -->
    <button id="increment">点击自增</button>  <!-- 定义一个具有 id 为"increment"的按钮，文本为"点击自增" -->

    <script type="text/javascript">
        var counter = 0;  // 初始化一个变量 counter 并赋值为 0
        $(document).ready(function(){  // 当文档加载完成时执行函数
            var $output = $('#output');  // 获取 id 为"output"的元素并存储在变量 $output 中
            $('#increment').click(function(){  // 为 id 为"increment"的元素添加点击事件
                counter++;  // 每次点击 counter 自增 1
                $output.html(counter);  // 将 counter 的值更新到 $output 元素的内容中
            });
            $output.html(counter);  // 初始化时将 counter 的值显示在 $output 元素中
        });
    </script>
</body>
</html>